<template>
  <view class="my_input_top">
    <view style="width: 95%;margin: 0 auto;">
      <uni-search-bar class="uni-mt-10" radius="40" clearButton="auto" cancelButton="none" bgColor="#000000"
        v-model="value_" type="search" @confirm="enterEvent" @input="getkeylist"></uni-search-bar>
    </view>
    
    <view v-if="clearn==true" class="my_input_list" v-for="item,index in arr" :key="index">
      <view :id='item.mid' @click="searchWord(item.name)">
        <image src="../../static/my/search.png" mode=""></image>
        <text space="ensp">{{{"keyword":value_,"name":item.name}|trueKey}}</text>
        <text space="ensp">{{{"keyword":value_,"name":item.name}|falseKey}}</text>
      </view>
    </view>
    <view v-for="item,index in arr_history" :key="index" class="my_search_history">
      
    </view>
  </view>
</template>

<script>
  export default {
    name: "search",
    data() {
      return {
        search: false,
        value_: "",
        http: "",
        arr: [],
        clearn: true
      };
    },
    mounted() {
      console.log("挂载search组件")
      uni.$on("clearnInput",()=>{
        console.log("清理输入框内容")
        this.value_=''
        this.clearn=false
      })
    },
    //微信小程序更改组件内样式属性
    options: {
      styleIsolation: 'shared'
    },
    methods: {
      enterEvent(e) {
        clearInterval(this.http)
        uni.navigateTo({
          url: "/pages/search/search?key=" + e.detail.value
        })
      },
      getkeylist(e) {
        clearInterval(this.http)
        console.log(e)
        this.value_ = e
        if (this.value_ == "") {
          this.arr = []
          return
        } else {
          this.clearn=true
          this.http = setInterval(async () => {
            let {
              data: {
                data: {
                  song: {
                    itemlist
                  }
                }
              }
            } = await uni.$http.get("search/quick?key=" + e)
            this.arr = itemlist
            clearInterval(this.http)
          }, 800)
        }
      },

      searchWord(e) {
        uni.navigateTo({
          url: "/pages/search/search?key=" + e
        })
      }
    },

    filters: {
      trueKey(e1) {
        let e = e1.name
        let value = (e.trim()).toLowerCase().replace(" ", "、").split('')
        let value2 = (e1.keyword.trim()).toLowerCase().replace(" ", "、").split('')
        let result = []
        let name_null = 0
        let null_index = 0
        let lh
        for (let i = 0; i <= value.length - 1; i++) {
          if (value[i] == value2[i]) {
            result.push(value[i])
          } else if (value[i] == '、') {
            null_index == i
            name_null++
          }
        }
        result = (result.join("")).replace(",", "")
        if (result.length == 1) {
          name_null = 1
        } else if (result.length > 1) {
          name_null = result.length
        } else {
          name_null = 0
        }
        return e.substr(0, name_null)
      },

      falseKey(e1) {
        let e = e1.name
        let value = (e.trim()).toLowerCase().replace(" ", "、").split('')
        let value2 = (e1.keyword.trim()).toLowerCase().replace(" ", "、").split('')
        let result = []
        let last_index = 0
        let last_length = 0
        let null_index = 0
        let lh
        for (let i = 0; i <= value.length - 1; i++) {
          if (value[i] != value2[i]) {
            result.push(value[i])
          } else if (value[i] == value2[i]) {
            last_index++
          }
        }
        result = (result.join("")).replace(",", "").replace("、", " ")
        if (last_index == 1) {
          last_index = 1
        } else if (last_index > 1) {
          last_index
        } else {
          last_index = 0
        }

        if (result.length == 1) {
          last_length = 1
        } else if (result.length > 1) {
          last_length = result.length
        } else {
          last_length = 0
        }
        return e.substr(last_index, last_length)
      },

    },

    props: {

    }

  }
</script>

<style lang="scss">
  /* /---------  搜索区域 ---------/ */

  .my_input_top {
    position: relative;
    margin: 0 0 10rpx 0;
    width: 100%;



    .uni-mt-10 {
      /*光标颜色*/
      caret-color: #25FCB9;

      /deep/ .uni-searchbar__box {
        justify-content: left;

        .uni-searchbar__box-icon-search {
          padding-left: 30rpx;
        }

        .uni-searchbar__box-search-input {
          color: white;
        }
      }
    }

    .my_input_list {
      position: relative;
      z-index: 50;
      margin: 3% 0 0 5%;
      width: 80%;

      >view {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 50rpx;
        color: white;
        font-size: 28rpx;
        white-space: nowrap;
        text-overflow: ellipsis;

        >image {
          position: relative;
          z-index: 30;
          top: 5rpx;
          width: 40rpx;
          height: 40rpx;
        }

        >text {
          color: white;
        }

        >text:nth-child(2) {
          margin-left: 30rpx;
          color: #25FCB9;
        }
      }
    }
      
    > .my_search_history {
      position: relative;
      top: 10%;
      margin: 3% 0 0 5%;
      width: 80%;
    }
  }
</style>
